<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MRIOResult</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
    <script th:src="@{/js/echarts/echarts.js}" type="text/javascript"></script>
    <script th:src="@{/js/china.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery-3.1.1.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>

    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #mapChart{
            width: 100%;
            height: 100%;
        }
        .province{
            width: 300px;
            z-index: 999;
            text-align: right;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .legend{
            z-index: 999;
            position: absolute;
            bottom: 10px;
            left: 10px;
        }
        .legendValue{
            position: relative;
            color: #fff;
            font-size: 14px;
        }
        .min{
            float: left;
        }
        .max{
            float: right;
        }
    </style>
</head>
<body>
    <div id="mapChart" class="centerItem"></div>

    <div class="legend">
        <div class="legendValue">
            <span class="min">1</span>
            <span class="max">100</span>
        </div>
        <div class="colorLegend"></div>
    </div>

    <div class="province">
        <form class="layui-form" action="">
            <div class="layui-form-item" style="color: #fff">
                <label class="layui-form-label">数据流方向</label>
                <div class="layui-input-block">
                    <input lay-filter="type" type="radio" name="type" value="export" title="输出" checked="">
                    <input lay-filter="type" type="radio" name="type" value="import" title="输入">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Beijing" name="Beijing" title="Beijing" checked="">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Tianjin" name="Tianjin" title="Tianjin">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Hebei" name="Hebei" title="Hebei">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Shanxi" name="Shanxi" title="Shanxi">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="InnrMongolia" name="InnrMongolia" title="InnrMongolia">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Liaoning" name="Liaoning" title="Liaoning">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Jilin" name="Jilin" title="Jilin">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Heilongjiang" name="Heilongjiang" title="Heilongjiang">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Shanghai" name="Shanghai" title="Shanghai">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Jiangsu" name="Jiangsu" title="Jiangsu">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Zhejiang" name="Zhejiang" title="Zhejiang">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Anhui" name="Anhui" title="Anhui">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Fujian" name="Fujian" title="Fujian">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Jiangxi" name="Jiangxi" title="Jiangxi">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Shandong" name="Shandong" title="Shandong">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Henan" name="Henan" title="Henan">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Hubei" name="Hubei" title="Hubei">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Hunan" name="Hunan" title="Hunan">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Guangdong" name="Guangdong" title="Guangdong">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Guangxi" name="Guangxi" title="Guangxi">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Hainan" name="Hainan" title="Hainan">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Chongqing" name="Chongqing" title="Chongqing">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Sichuan" name="Sichuan" title="Sichuan">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Guizhou" name="Guizhou" title="Guizhou">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Yunnan" name="Yunnan" title="Yunnan">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Tibet" name="Tibet" title="Tibet">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Shaanxi" name="Shaanxi" title="Shaanxi">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Gansu" name="Gansu" title="Gansu">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Qinghai" name="Qinghai" title="Qinghai">
                    </div>
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Ningxia" name="Ningxia" title="Ningxia">
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <input lay-filter="province" type="checkbox" value="Xinjiang" name="Xinjiang" title="Xinjiang">
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript">
    let coordinates = {};
    let provinceList = [];
    let activeProvince = ["Beijing"];
    let datas = [];
    let series = [];
    let mapChart = echarts.init(document.getElementById('mapChart'));
    let colors = [];
    let maxValue=-1, minValue=-1;
    let type = "import";

    function byte2Hex(n)
    {
        var nybHexString = "0123456789ABCDEF";
        return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
    }

    function RGB2Color(r,g,b)
    {
        return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
    }

    function setColors(len,phase)
    {
        if (phase == undefined) phase = 0;
        let center = 128;
        let width = 127;
        let legendHtml = "";

        let frequency = Math.PI*2/len;
        for (let i = 0; i < len; ++i)
        {
            let red   = Math.sin(frequency*i+2+phase) * width + center;
            let green = Math.sin(frequency*i+0+phase) * width + center;
            let blue  = Math.sin(frequency*i+4+phase) * width + center;
            colors.push(RGB2Color(red,green,blue));
        }
    }

    function drawLegend(){
        let phase = 0;
        let center = 128;
        let width = 127;
        let legendHtml = "";

        let frequency = Math.PI*2/30;
        for (let i = 0; i < 30; ++i)
        {
            let red   = Math.sin(frequency*i+2+phase) * width + center;
            let green = Math.sin(frequency*i+0+phase) * width + center;
            let blue  = Math.sin(frequency*i+4+phase) * width + center;
            legendHtml += '<font style="color:' + RGB2Color(red,green,blue) + '">&#9608;</font>';
        }
        $(".colorLegend").html(legendHtml);
    }

    function getCoordinate(){
        $.get("/province/getAll", function (result){
            coordinates = {};
            if (result?.length > 0){
                provinceList = result;
                for(let i in result){
                    let item = result[i];
                    if (item?.province){
                        coordinates[item.province] = [item.longitude, item.latitude];
                    }
                }
            }
        });
    }

    function getData(){
        let url = "";
        if (type == "export") {
            url = "/resultExport/findByProvinceExportListAndItem";
        }else{
            url = "/resultExport/findByProvinceImportListAndItem";
        }
        $.post(url, {
            "provinces": activeProvince,
            "itemName": "NO2_Air"
        }, function (result) {
            datas = [];
            if (result?.length > 0) {
                datas = result;
                result.sort(function (a, b) {
                    return a.value - b.value
                });
                minValue = result[0].value;
                maxValue = result[result.length - 1].value;
                $(".min").html(minValue);
                $(".max").html(maxValue);
                colors = [];
                setColors(datas.length);
                datas.forEach(function (item, i) {
                    item.color = colors[i];
                });

                buildSeries();
            }
        });
    }

    function buildSeries(){
        let convertData = function(data) {
            let res = [];
            for(let i = 0; i < data.length; i++) {
                let dataItem = data[i];
                let fromCoord = coordinates[dataItem.provinceExport];
                let toCoord = coordinates[dataItem.provinceImport];
                if(fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord,
                        value: dataItem.value,
                        color: dataItem.color,
                        path: dataItem.provinceExport + " --> " + dataItem.provinceImport
                    }, {
                        coord: toCoord,
                    }]);
                }
            }
            return res;
        };

        series = [];
        [
            ['', datas]
        ].forEach(function(item, i) {
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 2,
                symbol:["", "arrow"],
                symbolSize: 15,
                // effect: {
                //     show: true,
                //     period: 6,
                //     trailLength:0,
                //     symbol: 'arrow',
                //     symbolSize: 10
                // },
                lineStyle: {
                    normal: {
                        color:function(val){
                          return val?.data?.color;
                        },
                        width: 3,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function(val) {
                    return 5;
                },
                itemStyle: {
                    normal: {
                        // color: color[i]
                    }
                },
                data: provinceList.map(function(dataItem) {
                    return {
                        name: dataItem.province,
                        value: coordinates[dataItem.province]
                    };
                })
            });
        });

        drawChart();
    }

    function drawChart(){
        let option = {
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(166, 200, 76, 0.82)',
                borderColor: '#FFFFCC',
                showDelay: 0,
                hideDelay: 0,
                enterable: true,
                transitionDuration: 0,
                extraCssText: 'z-index:100',
                formatter: function (params, ticket, callback) {
                    //根据业务自己拓展要显示的内容
                    let res = '';
                    if (params?.data?.path){
                        let name = params.data.path;
                        let value = params.value;
                        res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value;
                    }else{
                        res = null;
                    }
                    return res;
                },
            },
            backgroundColor:"#013954",
            geo: {
                map: 'china',
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true, //是否允许缩放
                itemStyle: {
                    normal: {
                        color: 'rgba(51, 69, 89, .5)', //地图背景色
                        borderColor: '#516a89', //省市边界线00fcff 516a89
                        borderWidth: 1
                    },
                    emphasis: {
                        color: 'rgba(37, 43, 61, .5)' //悬浮背景
                    }
                }
            },
            series: series
        };
        mapChart.setOption(option);
    }

    layui.use(['form', 'layer', 'jquery' ], function () {
        let form = layui.form,
            layer = layui.layer;
        form.on('radio(type)', function (data){
            type = data.value;
            getData();
        });
        form.on('checkbox(province)', function (data) {
            let checked = data.elem.checked;
            if (checked){
                activeProvince.push(data.value);
            }else if (activeProvince.length > 1){
                for (let i=0; i<activeProvince.length; i++){
                    if (activeProvince[i] === data.value){
                        activeProvince.splice(i, 1);
                    }
                }
            }else{
                $("input[name='" + data.value + "']").prop("checked", true);
                form.render();
                layer.msg('最少选中一个城市！');
            }

            getData();
        });
    });

    $(function(){
       getCoordinate();
       getData();
       drawLegend();
    });

</script>
</html>